<template>
    <div id="home">
        <el-container>
            <!--侧边栏-->
            <el-aside :width="isCollapse ? '64px' : '200px'">
                <!--自定义侧边栏功能-->
                <div class="fonctions-box">
                    <img src="@/assets/imgs/rylogo.png" alt="启航编码信息科技有限公司" width="38" height="38" class="logo">
                    <strong v-if="!isCollapse" class="title">SailCode管理平台</strong>
                </div>
                <el-menu class="el-menu-vertical-demo" unique-opened :collapse-transition="false" :collapse="isCollapse"
                    router>
                    <!--渲染一级菜单-->
                    <el-submenu :index="menu1.path" v-for="menu1 in $store.state.user.loginInfo.menuList"
                        :key="menu1.menuId">
                        <template slot="title">
                            <svg-icon :icon-class="menu1.icon" />
                            <span>{{ menu1.menuName }}</span>
                        </template>
                        <!--渲染二级菜单-->
                        <div v-for="menu2 in menu1.childrenList" :key="menu2.menuId">
                            <!--二级菜单中没三级菜单-->
                            <el-menu-item :index="menu2.path" v-if="menu2.childrenList.length == 0">
                                <svg-icon :icon-class="menu2.icon" />
                                <span slot="title">{{ menu2.menuName }}</span>
                            </el-menu-item>
                            <!--二级菜单有三级菜单-->
                            <el-submenu :index="menu2.path" v-else>
                                <template slot="title">
                                    <svg-icon :icon-class="menu2.icon" />
                                    <span>{{ menu2.menuName }}</span>
                                </template>
                                <div v-for="menu3 in menu2.childrenList" :key="menu3.menuId">
                                    <el-menu-item :index="menu3.path">
                                        <svg-icon :icon-class="menu3.icon" />
                                        <span slot="title">{{ menu3.menuName }}</span>
                                    </el-menu-item>
                                </div>
                            </el-submenu>
                        </div>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <!--内容区-->
            <el-container>
                <!--头部区-->
                <el-header>
                    <div class="header-box">
                        <i class="icon-shouqi iconfont" @click="cllapceSwitch"></i>
                        <!--导航栏-->
                        <el-col :span="23">
                            <el-breadcrumb separator="/" class="navi">
                                <el-breadcrumb-item v-for="meta in getRouteInfo" :key="meta.path">
                                    {{ meta.title }}
                                </el-breadcrumb-item>
                            </el-breadcrumb>
                        </el-col>
                        <!--图像-->
                        <el-col :span="1" class="pictorBox">
                            <el-dropdown @command="handleCommand" trigger="click">
                                <img :src="this.$store.state.user.loginInfo.avatar" class="pictor" />
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="1">个人中心</el-dropdown-item>
                                    <el-dropdown-item command="0">退出系统</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>

                        </el-col>
                    </div>
                </el-header>
                <!--主要内容区-->
                <el-main>
                    <!--页签导航-->
                    <Targs :routerLink="getRouteInfo" />
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { loginInfo, loginOut } from '@/api/login'
import Targs from '@/components/Targs'

export default {
    name: 'home',
    components: { Targs },
    data() {
        return {
            isCollapse: false,
        }
    },
    methods: {
        //是否菜单折叠
        cllapceSwitch() {
            this.isCollapse = !this.isCollapse;
        },
        //获取用户登录的信息
        getLoginInfo() {
            loginInfo().then(success => {
                this.$store.commit('user/setLoginUserInfo', success.data);
            }).catch(err => {
                //提示失败信息
                this.$message({
                    message: err.msg,
                    type: "error"
                });
            })
        },
        //Dropdown处理
        handleCommand(command) {
            switch (command) {
                case "0":
                    this.logout();
                    break;
            }
        },
        //退出登录
        logout() {
            loginOut().then(success => {
                this.$message({
                    message: "退出成功",
                    type: "success"
                })
            }).catch(err => {
                this.$message({
                    message: "退出成功",
                    type: "success"
                })
            })
            //清空缓存数据
            this.$store.commit('user/cealStore');
            this.$store.commit('targs/cealStore');
            //跳转路由到登录页
            this.$router.push('/login');
        }

    },
    created() {
        this.getLoginInfo();
    },
    computed: {
        //获取路由信息
        getRouteInfo() {
            let arr = new Array();
            this.$route.matched.forEach(k => {
                let temp = new Object;
                temp.title = k.meta.title;
                temp.path = k.path;
                temp.active = false;
                arr.push(temp);
            })
            return arr;
        }
    },
    watch: {
        // "getRouteInfo":{
        //     deep:true,
        //     handler(){

        //     }
        // }
    }
}
</script>

<style lang="less" scoped>
//侧边栏
.el-aside {
    background: linear-gradient(#439481, #03503f) !important;
    min-height: 100vh;
    // box-shadow: -3px 0px 3px 6px #10e02c inset;
}

.fonctions-box {
    height: 59px;
    border-bottom: 1px solid rgb(106, 126, 126);
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    padding-right: 10px;

    &:hover {
        cursor: pointer;
    }
}

.title {
    .text(16px);

    &:hover {
        cursor: pointer;
    }
}

.el-menu {
    border-right: none;
}

.el-submenu /deep/.el-submenu__title {
    &:hover {
        color: #ddeb17 !important;
        text-shadow: 0px 0px 6px #cad34e;
        background: linear-gradient(#224d43, #0b2b24) !important;
    }

    color: #f3bb03 !important;
    background: linear-gradient(#439481, #03503f) !important;
}

/deep/.el-submenu .el-menu-item {
    &:hover {
        color: #ddeb17 !important;
        text-shadow: 0px 0px 6px #cad34e;
        background: linear-gradient(#224d43, #0b2b24) !important;
    }

    color: #f3bb03 !important;
    background: linear-gradient(#439481, #03503f) !important;
}

svg {
    color: rgb(142, 185, 42) !important;
    padding-right: 10px;
}

//头部区
.el-header {
    background: linear-gradient(#4fd8b8, #08af7d) !important;
}

.pictorBox {
    text-align: center;
    .verticalAlign
}

.navi {
    overflow: hidden;
    width: 40vw;
}

.header-box {
    display: flex;
    align-content: center;
}

.pictor {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    vertical-align: middle;
    cursor: pointer;

    &:hover {
        box-shadow: 0px 0px 8px 1px #f3bb03;
    }

    &:active {
        box-shadow: 0px 0px 8px 1px #276404;
    }
}

.el-breadcrumb__item {
    line-height: 60px;
}

.iconfont {
    color: #1b2b2a !important;
    font-size: 24px;
    line-height: 60px;
    padding-right: 20px;

    &:hover {
        cursor: pointer;
    }
}

//内容区
.el-main {
    padding: 10px !important;
}


// .el-card__body,.el-main{

//     }
</style>
